<template>
	<view class="wish-view">
		<view class="search-view">
			<u-search :showAction="false" :placeholder="$t('searchResult.search')" @click="goSearch" :disabled="true"
				height="37">
			</u-search>
		</view>

		<view class="swiper-view">
			<u-swiper :list="swiperImgArray" @change="e => current = e.current" @click="swiperClick1" :autoplay="true"
				radius="0" height="232rpx" circular>
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiperImgArray" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		
		<view class="goods-list" v-if="wishGoodsList.length > 0">
			<!-- <waterfallsFlow imageSrcKey="seriesOne" :list="wishGoodsList">
				<template v-slot:default="item">
					<GoodsItem :isNoImg="true" :isWish="false" :isOther="true" :goodsItem="item"></GoodsItem>
				</template>
			 </waterfallsFlow > -->
			 <u-waterfall v-model="wishGoodsList" ref="uWaterfall">
			 		<template v-slot:left="{leftList}">
			 			<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
			 				<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
			 				<u-lazy-load @tap="goCommDetail(item)" threshold="-450" border-radius="10" :image="item.morebagPublishPictures?item.morebagPublishPictures[0].picture:''" :index="index"></u-lazy-load>
			 				<view class="demo-title" @tap="goCommDetail(item)">
			 					{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
			 				</view>
							<view class="demo-tag"  @tap="goCommDetail(item)">
								<view class="demo-tag-owner">
			 					${{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
								</view>
								<view class="demo-tag-text"  v-if="(item.status==3 || item.status==10)">
			 					{{$t("GoodsItem.wish")}}
								</view>
							</view>
			 			<!-- 	<view class="demo-tag">
			 					<view class="demo-tag-owner">
			 						自营
			 					</view>
			 					<view class="demo-tag-text">
			 						放心购
			 					</view>
			 				</view> -->
			 				<view class="demo-shop">
			 					{{item.shop}}
			 				</view>
			 				<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
			 			</view>
			 		</template>
			 		<template v-slot:right="{rightList}">
			 			<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
			 				<u-lazy-load @tap="goCommDetail(item)" threshold="-450" border-radius="10" :image="item.morebagPublishPictures?item.morebagPublishPictures[0].picture:''" :index="index"></u-lazy-load>
			 				<view class="demo-title" @tap="goCommDetail(item)">
			 					{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
			 				</view>
			 				<view class="demo-tag"  @tap="goCommDetail(item)">
			 					<view class="demo-tag-owner">
			 						${{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
			 					</view>
			 					<view class="demo-tag-text"  v-if="(item.status==3 || item.status==10)">
			 						{{$t("GoodsItem.wish")}}
			 					</view>
			 				</view>
			 			<!-- 	<view class="demo-tag">
			 					<view class="demo-tag-owner">
			 						自营
			 					</view>
			 					<view class="demo-tag-text">
			 						放心购
			 					</view>
			 				</view> -->
			 				<view class="demo-shop">
			 					{{item.shop}}
			 				</view>
			 				<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
			 			</view>
			 		</template>
			 	</u-waterfall>
			 	<u-loadmore bg-color="#fbfbfb" :nomoreText="$t('loadText.nomore')" :loadingText="$t('loadText.loading')" :loadmoreText="$t('loadText.loadmore')" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
		<!-- loading || -->
		<u-loading-icon v-if=" wishGoodsList.length <= 0"></u-loading-icon>

		<!-- <view class="goods-list" @scroll="scrolltolower">
			<waterfall :col="2" :data="wishGoodsList">
				<template>
					<GoodsItem :isWish="false" :isOther="true" :goodsItem="item" v-for="(item, index) in wishGoodsList"
						:key="index"></GoodsItem>
				</template>
			</waterfall>
		</view> -->
		
		<u-popup :show="show" mode="center">
			<view class="content">
				<view class="close-all" @tap="closeCard">
					{{$t('wishAll.close')}}
				</view>
				<view class="wish-push">
					{{$t('wishAll.cardTitle')}}
				</view>
				<u-swiper :list="swiperImgArray1" @change="e => dataCurrent = e.current" @click="swiperClick" :autoplay="false"
					radius="0" height="800rpx" previousMargin="30"
                nextMargin="30" circular imgMode="aspectFit" bgColor="#fff">
					<view slot="indicator" class="bottom-desc">
						<view class="price" v-if="index === dataCurrent" v-for="(item, index) in swiperDataArray1" :key="index">
							$ {{String(item).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
						</view>
						
						<view class="no-interest" v-if="index === dataCurrent" v-for="(item, index) in swiperDataArray1" :key="item" @tap="clickNoInterest(index)">
							{{$t('wishAll.noInterest')}}
						</view>
					</view>
				</u-swiper>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getAllWish,
		getSwiper,
		getWishUsers,
		putGoodsState
	} from "@/common/api.js"
	import GoodsItem from '@/components/GoodsItem/GoodsItem'
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";

	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				
				flowList: [],
				list: [
				{
					price: 35,
					title: '',
					shop: '',
					image: '',
				},
				],
				swiperImgArray: [],
				current: 0,
				wishGoodsList: [],
				loading: false,
				// pageNum: 1,
				show: false,
				dataCurrent: 0,
				swiperImgArray1: [],
				swiperDataArray1: [],
				dataList: [],
				swiperArray: [],
				pageNum:1,
				total: null
			}
		},
		components: {
			GoodsItem,
			waterfallsFlow
		},
		// mounted() {
		// 	window.addEventListener("scroll", this.scrolltolower, true);
		// },
		methods: {
			goCommDetail(item) {
			
				console.log(item,"111");
				uni.navigateTo({
				
					url:`/pages/commodityDetails/commodityDetails?id=${item.hardware}&wishDetail=${item.money}`
				})
			},
			addRandomData() {
							for(let i = 0; i < 10; i++) {
								let index = this.$u.random(0, this.list.length - 1);
								// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
								let item = JSON.parse(JSON.stringify(this.list[index]))
								item.id = this.$u.guid();
								this.flowList.push(item);
							}
						},
						remove(id) {
							this.$refs.uWaterfall.remove(id);
						},
						clear() {
							this.$refs.uWaterfall.clear();
						},
			// 关闭推送
			closeCard() {
				this.show = false;
			},
			scrolltolower() {
				setTimeout(() => {
					let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
					let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
					let clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
					// console.log(scrollHeight, scrollTop, clientHeight);
					if (scrollTop + clientHeight >= scrollHeight - 300 && this.loading) {
						console.log("滚动到底部");
						this.initWishGoodsList();
					}
				}, 30)
			},
			goPublishWish() {
				uni.navigateTo({
					url: "/pages/wishList/wishList"
				})
			},
			// 轮播图点击事件
			swiperClick(index) {
				console.log("点击轮播", index);
				uni.navigateTo({
					url: `/pages/commodityDetails/commodityDetails?id=${this.dataList[index].id}`
				})
			},
			// 轮播图点击事件
			swiperClick1(index) {
				console.log(this.swiperArray[index]);
				console.log("swiperClick():", index);
				if (this.swiperArray[index].goodsId) {
					uni.navigateTo({
						url: `/pages/commodityDetails/commodityDetails?id=${this.swiperArray[index].goodsId}`
					})
				}
			
				if (this.swiperArray[index].newsId) {
					uni.navigateTo({
						url: `/pages/newsDetails/newsDetails?id=${this.swiperArray[index].newsId}`
					})
				}
			},
			goSearch() {
				uni.navigateTo({
					url: `/pages/search/search?want=${1}`
				})
			},
			//轮播图获取
			async getSwiperImg() {
				this.swiperImgArray = []
				const res = await getSwiper({
					parentId: 1
				});
				if (res.code == 200) {
					this.swiperImgArray = [];
					this.swiperArray = res.rows;
					res.rows.forEach(e => {
						this.swiperImgArray.push(e.url)
					})
				}
			},
			async initWishGoodsList() {
				if(this.wishGoodsList.length == this.total) {
				
					
					return
				}
				
				this.loading = true;
				const res = await getAllWish({
					pageSize:4,
					pageNum: this.pageNum
					// pageNum: this.pageNum
				});
				console.log(res);
				if (res.code == 200) {
					this.pageNum++;
					const tempData = res.rows.filter(item => item.morebagPublishPictures.length > 0);
					this.wishGoodsList = [...this.wishGoodsList, ...tempData];
					this.total = res.total;
					this.loading = false;
					uni.stopPullDownRefresh();
		
				}
			},
			async clickNoInterest(index) {
				console.log(index, this.dataList);
				const res = await putGoodsState({
					id: this.dataList[index].id,
					status: 12
				});
				
				console.log(res);
				if(res.code == 200) {
					this.swiperImgArray1.splice(index, 1);
					this.swiperDataArray1.splice(index, 1);
					this.dataList.splice(index, 1);
					if(this.dataList.length <= 0) {
						this.show = false;
					}
				}
			},
			onReachBottom() {
				console.log(this.wishGoodsList,this.total)
				if(this.total>0 && this.wishGoodsList.length < this.total){
					this.loadStatus = 'loading';
					// 模拟数据加载
					setTimeout(() => {
						this.addRandomData();
						this.loadStatus = 'loadmore';
					}, 1000)
				}
				if(this.wishGoodsList.length>=this.total){
					this.loadStatus = 'nomore';
				}
			
			this.initWishGoodsList();
				
		
			
		
		
			},
			async initWishUser() {
				const res = await getWishUsers();
				console.log(res);
				if(res.code == 200) {
					this.swiperImgArray1 = [];
					this.swiperDataArray1 = [];
					this.dataList = [];
					
					if(res.rows.length > 0) {
						this.show = true;
					}
					res.rows.forEach(item => {
						this.swiperImgArray1.push(item.morebagPublishPictures[0].picture);
						this.swiperDataArray1.push(item.money);
						this.dataList.push(item);
					});
					uni.stopPullDownRefresh();
					
					console.log(this.dataList);
				}
			}
		},
		onShow() {
			this.initWishUser();
			// this.initWishGoodsList();
			this.initWishGoodsList();
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.wishGoodsList = [];
			this.swiperImgArray1 = [];
			this.swiperDataArray1 = [];
			this.dataList = [];
			this.initWishUser();
			this.initWishGoodsList();
		
			// setTimeout(function () {
			// 	uni.stopPullDownRefresh();
			// }, 1000);
		},
		onLoad() {
			this.getSwiperImg();
			this.addRandomData();
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("wishGoods.title")
			});
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		text-align: center;
		width: 300rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 700;
		font-size: 24rpx;
		margin: 10rpx 0;
	}
	
	.demo-tag {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		display: inline;
		width: 50%;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 550;
		font-size: 30rpx;
		color: #FF0000;
	}
	
	.demo-tag-text {
		line-height: 40rpx;
		background-color: #000;
		color: #fff;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 700;
		font-size: 18rpx;
		margin-right: 10rpx;
		padding: 5rpx 10rpx;
	}
	
	.demo-price {
		display: inline;
		width: 50%;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 550;
		font-size: 30rpx;
		color: #FF0000;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	.u-loading-icon {
		padding: 30rpx 0;
	}
	
	.close-all {
		text-align: right;
		margin-right: 15rpx;
		font-size: 28rpx;
		color: #858585;
		margin-top: 15rpx;
	}
	
	.bottom-desc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 370rpx;
		margin-bottom: 35rpx;
		position: absolute;
		left: -50%;
		transform: translateX(-50%);
		top: -60rpx;
	}
	
	.price {
		color: red;
		font-size: 32rpx;
		font-weight: 700;
		// width: 300rpx;
		// text-align: center;
	}
	
	.no-interest {
		color: #858585;
		font-size: 28rpx;
		font-weight: 700;
	}
	
	.content {
		width: 600rpx;
		
		.wish-push {
			text-align: center;
			// margin-bottom: 65rpx;
			margin-top: 15rpx;
			font-size: 35rpx;
			font-weight: 700;
		}
	}
	
	.indicator {
		@include flex(row);
		justify-content: center;
	
		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
	
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;
	
		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	
	.u-list {
		padding-bottom: 112rpx;
	}

	.search-view {
		padding: 14rpx 22rpx;
		background-color: #fff;
	}

	// 轮播图区域
	.swiper-view {
		margin: 0 30rpx;
		margin-top: 14rpx;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.goods-list {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// flex-wrap: wrap;
	padding: 0rpx 20rpx;
	padding-bottom: 20rpx;
	box-sizing: border-box;
	}

	.publish-wish {
		height: 90rpx;
		position: fixed;
		bottom: 120rpx;
		width: 75%;
		background-color: #000;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: bold;
		border-radius: 20rpx;
		background: #000000;
		font-size: 36rpx;
		line-height: 90rpx;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
